<template>
  <div class="wrap details">
    <!-- <div v-for="item in details" :key="item.id"> -->
    <div class="detail">
      <img :src="details.imgUrl" alt="" />
      <b class="tit">
        {{ details.name }}
        <i @click="showShare = true"> <van-icon name="guide-o" />分享</i>
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </b>
      <div class="price">
        <div class="like">
          <p class="newprice">
            <span>￥</span><span>{{ details.price }}</span>
          </p>
        </div>
        <div>
          <i @click="show1">
            <van-icon name="like-o" v-show="showBoolean" />
            <van-icon name="like" v-show="!showBoolean" color="red" />收藏</i
          >
        </div>
      </div>
      <br />
      <p class="categroy">分类: {{ details.categroy }}</p>
      <p class="author">地址: {{ details.author }}</p>
      <p class="line"></p>
      <p class="desc">
        {{ details.description }}
      </p>
      <van-goods-action>
        <van-goods-action-icon
          icon="chat-o"
          text="客服"
          @click="onClickIcon"
        />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          @click="goCart"
        />
        <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
        <!-- <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="onClick(details.id)"
        /> -->
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="showPopup"
        />
      </van-goods-action>
    </div>

    <!-- </div> -->
    <!-- <van-cell is-link @click="onClickButton">展示弹出层</van-cell> -->
    <van-popup
      v-model="show"
      position="bottom"
      closeable
      :style="{ height: '60%' }"
    >
      <van-password-input
        :value="value"
        info="请输入密码"
        :error-info="errorInfo"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { getDetailsList } from "../api/api";
import { Toast } from "vant";
export default {
  // 定义属性
  name: "Details",
  data() {
    return {
      cartNum: 0,
      value: "",
      errorInfo: "",
      showKeyboard: true,
      showShare: false,
      show: false,
      stateCode: null,
      
      options: [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
      details: [],
      showBoolean: true,
    };
  },
  methods: {
    getDetails() {
      getDetailsList({
        id: this.$route.query.id,
      }).then((res) => {
        if (res.code == 200) {
          // console.log(this.$route.query.id);
          // console.log(res);
          // console.log(res.data);
          // console.log(this.details);
          this.details = res.data;
          // console.log(this.details);
        }
      });
    },
    showPopup() {
      this.show = true;
      this.value = "";
    },
    showFa() {
      this.show = false;
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    fengxiang() {},
    show1() {
      this.showBoolean = !this.showBoolean;
    },
    like() {
      console.log(this);
    },
    onClickIcon() {
      // Toast("点击图标");
    },
    goCart() {
      // console.log(111);
      this.$router.push({path: "/cart"});
    },
    onClickButton() {
      Toast.success("购买成功");
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getDetails();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  watch: {
    value(value) {
      if (value.length >= 6 && value !== "123456") {
        this.errorInfo = "密码错误";
      } else {
        this.errorInfo = "";
        if (value == "123456") {
          this.showFa();
          this.onClickButton();
          this.value = "";
        }
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.van-password-input__security {
  margin-top: 50px;
}
.detail {
  img {
    width: 100%;
    padding: 50px;
  }
  .tit {
    padding: 0 10px;
    font-size: 20px;
    display: block;
    display: flex;
    justify-content: space-between;
    i {
      font-size: 16px;
      color: #666;
    }
  }
  .price {
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
    .like {
      display: flex;
    }
    .newprice {
      color: #fd4a2b;
      display: flex;
      margin-left: 10px;
      span:nth-of-type(1) {
        font-size: 14px;
        line-height: 35px;
      }
      span:nth-of-type(2) {
        font-size: 24px;
      }
    }
    i {
      font-size: 16px;
      color: #666;
    }
  }
  .categroy{
    padding: 0px 10px;
  }
  .author{
    padding: 0px 10px;
  }
  .number {
    font-size: 14px;
    color: #666;
    margin-top: -30px;
    margin-left: 10px;
    span {
      padding: 0 6px;
    }
  }
  .line {
    margin: 10px;
    border-bottom: 1px solid #f2f2f2;
  }
  .desc {
    font-size: 14px;
    padding: 0 10px;
  }
}
</style>